<template>
  <div class="koi-body">
    <!-- 头部开始 -->
    <div class="header">
      <!-- 首页 -->
      <a
        class="homePage font-bold colorDeepskyblue"
        :style="{ 'font-size': Math.round(screenWidth / 100) + 'px' }"
        @click="goBack"
        >首页</a
      >
      <!-- 时间 -->
      <div
        class="localTime colorDeepskyblue"
        :style="{ 'font-size': Math.round(screenWidth / 100) + 'px' }"
      >
        {{ dateYear }} {{ dateWeek }} {{ dateDay }}
      </div>

      <!-- 装饰10 -->
      <dv-decoration-10 class="dv-dec-10-left" />
      <!-- 装饰8 -->
      <dv-decoration-8 class="dv-dec-8-left" :color="decorationColor" />
      <!-- 标题 -->
      <span
        class="title font-bold colorText"
        :style="{ 'font-size': Math.round(screenWidth / 100) + 'px' }"
        >可视化大屏</span
      >
      <!-- 装饰8 -->
      <dv-decoration-8
        class="dv-dec-8-right"
        :reverse="true"
        :color="decorationColor"
      />
      <!-- 装饰10 -->
      <dv-decoration-10 class="dv-dec-10-right" />
    </div>
    <!-- 头部结束 -->
    <!-- Element-UI Layout布局 -->
    <div class="layoutHome">
      <el-row>
        <el-col :span="8">
          <div :style="{ height: kHOne + 'px' }">
            <dv-border-box-12 style="padding: 12px">
              <leftchart1></leftchart1>
            </dv-border-box-12>
          </div>

          <div :style="{ height: kHTwo + 'px' }">
            <!-- style="padding:12px" -->
            <dv-border-box-1 style="padding: 12px">
              <!-- <leftchart2></leftchart2> -->
            </dv-border-box-1>
          </div>
        </el-col>

        <el-col :span="8">
          <div :style="{ height: kHThree + 'px' }">
            <dv-border-box-12 style="padding: 12px">
              <!-- <centerchart1></centerchart1> -->
            </dv-border-box-12>
          </div>
          <div :style="{ height: kHFour + 'px' }">
            <dv-border-box-12 style="padding: 12px">
              <!-- <centerchart2></centerchart2> -->
            </dv-border-box-12>
          </div>
          <div :style="{ height: kHFive + 'px' }">
            <dv-border-box-12 style="padding: 12px">
              <!-- <centerchart3></centerchart3> -->
            </dv-border-box-12>
          </div>
        </el-col>

        <el-col :span="8">
          <div :style="{ height: kHSix + 'px' }">
            <dv-border-box-1 style="padding: 12px">
              <!-- <rightchart1></rightchart1> -->
            </dv-border-box-1>
          </div>
          <div :style="{ height: kHSeven + 'px' }">
            <dv-border-box-12 style="padding: 12px">
              <!-- <rightchart2></rightchart2> -->
            </dv-border-box-12>
          </div>
          <div :style="{ height: kHEight + 'px' }">
            <dv-border-box-12 style="padding: 12px">
              <!-- <rightchart3></rightchart3> -->
            </dv-border-box-12>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup name="screen">
import leftchart1 from './components/left/chart1.vue'
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { formatTimeDate } from '../../utils/index'
//路由
const router = useRouter()
//默认颜色
const decorationColor = ['#568aea', '#000000']
//屏幕宽度
const screenWidth = ref(0)
const screenHeight = ref(0)
//=======年月日============
const dateDay = ref('')
const dateYear = ref('')
const dateWeek = ref('')
const weekday = ref('')
//=========返回===============
const goBack = () => {
  router.push('/index')
}
//==================页面加载===================
onMounted(() => {
  getScreenHeight()
  getScreenWidth()
  timeInterval()
  // 页面大小改变时触发
  window.addEventListener('resize', getScreenHeight, false)
  // 页面大小改变时触发
  window.addEventListener('resize', getScreenWidth, false)
})
//==================页面卸载===================
onBeforeUnmount(() => {
  window.removeEventListener('resize', getScreenHeight, false)
  // 页面大小改变时触发
  window.removeEventListener('resize', getScreenWidth, false)
  //清理定时器
  clearInterval(timer.value)
})
//=================定义高度===========================
const kHOne = ref(200)
const kHTwo = ref(500)
const kHThree = ref(300)
const kHFour = ref(500)
const kHFive = ref(450)
const kHSix = ref(300)
const kHSeven = ref(400)
const kHEight = ref(400)
// 获取浏览器高度进行自适应
const getScreenHeight = () => {
  screenHeight.value =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight
  // // 四舍五入取整数
  kHOne.value = Math.round(screenHeight.value * 0.47)
  kHTwo.value = Math.round(screenHeight.value * 0.475)
  kHThree.value = Math.round(screenHeight.value * 0.18)
  kHFour.value = Math.round(screenHeight.value * 0.38)
  kHFive.value = Math.round(screenHeight.value * 0.385)
  kHSix.value = Math.round(screenHeight.value * 0.3)
  kHSeven.value = Math.round(screenHeight.value * 0.32)
  kHEight.value = Math.round(screenHeight.value * 0.325)
}
// 字体大小根据宽度自适应
const getScreenWidth = () => {
  screenWidth.value =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth
}
//=================获取年月日====================
const timer = ref(0)
const timeInterval = () => {
  timer.value = setInterval(() => {
    dateDay.value = formatTimeDate(new Date(), 'HH: mm: ss')
    dateYear.value = formatTimeDate(new Date(), 'yyyy/MM/dd')
    dateWeek.value = weekday.value[new Date().getDay()]
  }, 1000)
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url('../../assets/images/bg.png');
  background-size: 100% 100%;
}
// 总体布局
.koi-body {
  color: darkturquoise;
  width: 100%;
  height: 100%;
  // 图片缩放自适应
  background: url('../../assets/images/bg.png') center center no-repeat;
  background-size: 100% 100%;
  position: fixed;
  overflow: hidden;
  // 头部布局
  .header {
    // DataV边框10宽度左侧和高度设置
    .dv-dec-10-left {
      width: 25%;
      margin-top: 0.5%;
      margin-left: 0.2%;
      height: 8px;
      float: left;
    }

    // DataV边框10宽度右侧和高度设置
    .dv-dec-10-right {
      width: 25%;
      margin-top: 0.5%;
      margin-left: 0.2%;
      height: 8px;
      float: right;
      // 边框翻转
      transform: rotateY(180deg);
    }

    // DataV边框8左侧宽度和高度设置
    .dv-dec-8-left {
      width: 18%;
      height: 6%;
      margin-top: 0.7%;
      position: absolute;
      left: 25%;
    }

    // DataV边框8宽度右侧和高度设置
    .dv-dec-8-right {
      width: 18%;
      height: 6%;
      margin-top: 0.7%;
      position: absolute;
      right: 25%;
    }

    // 标题自定义修改
    .title {
      position: absolute;
      left: 46%;
      margin-top: 0.8%;
    }

    // 当前时间css
    .localTime {
      position: absolute;
      right: 1%;
      top: 2%;
    }

    // 首页字体css
    .homePage {
      position: absolute;
      left: 1%;
      top: 2.2%;
    }
  }

  // koi-vue-screen可视化大屏三种布局都可以。这里采用方案三进行布局，
  // 1、网格布局grid。
  // 2、弹性布局flex。
  // 3、以及Element-UI的Layout 布局。
  // 项目中采用Element-UI的Layout 布局。其他两种也可以的，index.vue写的有例子可以自行进行改动。

  // 第一种-网格布局（IE10以下和手机端兼容性问题不太友好）,二维布局比flex更加强大
  .wrapper {
    position: absolute;
    left: 1%;
    top: 6%;
    right: 1%;
    /* 声明一个容器 grid */
    display: grid;
    /* 声明列的宽度,数字3表示的重复3次，即有3列宽度为200px*/
    grid-template-columns: repeat(3, 615px);
    /* 声明行间距和列间距 */
    grid-gap: 10px;
    /* 分别表示两行的高度 */
    grid-template-rows: 420px 500px;

    .item {
      font-size: 24px;
      color: #fff;
    }

    .one {
      flex: 1;
      background-color: #b8e8e0;
    }
    .two {
      background-color: #8cc7b5;
    }
    .three {
      background-color: #efe3bf;
    }
    .four {
      background-color: #bee7e9;
    }
    .five {
      background-color: #e6ceac;
    }
    .six {
      background-color: #ecad9e;
    }
  }

  // 第二种-flex 布局,一维布局
  .container {
    position: absolute;
    left: 1%;
    top: 6%;
    right: 1%;
    width: 100%;
    height: 100%;
    /* 声明一个 flex */
    display: flex;
    flex-wrap: wrap;
    // 列排序
    flex-direction: column;
    // 行排序
    //flex-direction: row;
    // 溢出则进行换行
    flex-wrap: wrap;
    .item {
      font-size: 24px;
      color: #fff;
    }

    .one {
      width: 30%;
      height: 30%;
      background-color: #b8e8e0;
    }
    .two {
      width: 30%;
      height: 30%;
      background-color: #8cc7b5;
    }
    .three {
      width: 30%;
      height: 30%;
      background-color: #efe3bf;
    }
    .four {
      width: 30%;
      height: 30%;
      background-color: #bee7e9;
    }
    .five {
      width: 30%;
      height: 30%;
      background-color: #e6ceac;
    }
    .six {
      width: 30%;
      height: 30%;
      background-color: #ecad9e;
    }
  }

  //页面根据浏览器大小自适应
  //width:calc(100vw - 100px); //宽度是浏览器宽度减100px
  //height:calc(100vh - 100px); //高度是浏览器高度减100px

  //VW是width of view(port)的缩写，也就是浏览器的宽度
  //VH是height of view(port)的缩写，也就是浏览器的高度

  /* 本项目采用ElementUI - Layout布局 */
  .layoutHome {
    position: absolute;
    min-width: 1000px;
    min-height: 600px;
    top: 5.5%;
    width: 100%;
    height: 100%;
    // padding-left: 0.1%;
    // padding-right: 0.1%;
  }
}
</style>
